<template>
  <div class="logininputs">
    <div class="logininputs_items" v-if="type === 1">
      <input
        type="text"
        v-model="userName"
        :placeholder="this.$t('lang.邮箱地址')"
        class="logininputs_items_input"
        :class="userNameIsErr ? 'err' : ''"
      />
      <span class="logininputs_err" v-show="userNameIsErr">{{
        userNameErrMsg
      }}</span>
      <input
        type="password"
        v-model="userPassword"
        :placeholder="this.$t('lang.登录密码')"
        class="logininputs_items_input"
        :class="userPasswordIsErr ? 'err' : ''"
      />
      <span class="logininputs_err" v-show="userPasswordIsErr">{{
        userPasswordErrMsg
      }}</span>
      <router-link
        :to="{
          name: 'FORGOTPASSWORD',
          params: { bounce: $route.params.bounce },
        }"
        class="logininputs_items_forgotpassword"
        >{{ $t("lang.忘记密码") }}?</router-link
      >
      <button
        @click="loginClickHandle"
        class="logininputs_items_submit"
        :class="!isSubmit ? 'disabled' : ''"
        :disabled="!isSubmit"
      >
        {{ $t("lang.登录") }}
      </button>
      <p>
        {{ $t("lang.没有帐户") }}?<router-link
          :to="{
            name: 'REGISTER',
            params: { bounce: $route.params.bounce },
          }"
          class="logininputs_items_reg"
          >{{ $t("lang.注册") }}</router-link
        >
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "LoginInput",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    type: Number,
    default() {
      return 1;
    },
  },
  data() {
    return {
      userName: "",
      userPassword: "",
      userNameIsErr: false,
      userNameErrMsg: "",
      userPasswordIsErr: false,
      userPasswordErrMsg: "",
      isSubmit: false,
    };
  },
  mounted() {},
  watch: {
    userName(v) {
      if (this.boolFormData()) {
        this.isSubmit = true;
      } else {
        this.isSubmit = false;
      }
    },
    userPassword(v) {
      if (this.boolFormData()) {
        this.isSubmit = true;
      } else {
        this.isSubmit = false;
      }
    },
  },
  methods: {
    boolFormData() {
      let usname = this.userName.replace(/^\s*|\s*$/, ""),
        uspass = this.userPassword.replace(/^\s*|\s*$/, "");
      if (usname === "") {
        this.userNameIsErr = true;
        this.userNameErrMsg = this.$t("lang.登录名不能为空");
        return false;
      } else if (!/[a-z0-9]+\@[a-z0-9]+\.[a-z]{3,}/.test(usname)) {
        this.userNameIsErr = true;
        this.userNameErrMsg = this.$t("lang.登录名不是电子邮箱地址");
        return false;
      } else {
        this.userNameIsErr = false;
        this.userNameErrMsg = "";
      }
      if (uspass === "") {
        this.userPasswordIsErr = true;
        this.userPasswordErrMsg = this.$t("lang.登录密码不能为空");
        return false;
      } else if (!/^[A-Z]{1,1}.{5,}/.test(uspass)) {
        this.userPasswordIsErr = true;
        this.userPasswordErrMsg = this.$t(
          "lang.登录密码应以大写字母开头的6到8位格式"
        );
        return false;
      } else {
        this.userPasswordIsErr = false;
        this.userPasswordErrMsg = "";
      }
      return true;
    },
    loginClickHandle(e) {
      if (this.boolFormData()) {
        console.log("ok");
        this.$route.params.bounce
          ? (location.href = decodeURIComponent(this.$route.params.bounce))
          : false;
      } else {
        console.log("err");
      }
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.logininputs {
  .logininputs_items {
    margin: 10 / @base auto;
    width: 300 / @base;
    input {
      &.logininputs_items_input {
        display: block;
        margin: 10 / @base auto;
        width: 270 / @base;
        padding: 10 / @base 10 / @base;
        border: 1 / @base solid #ccc;
        border-radius: 5 / @base;
        &.err {
          border: 1 / @base solid red;
        }
      }
    }
    a {
      color: rgb(165, 42, 42);
      &.logininputs_items_forgotpassword {
        display: block;
        text-align: right;
      }
      &.logininputs_items_reg {
        display: inline-block;
        margin: 0 5 / @base;
      }
    }
    button {
      &.logininputs_items_submit {
        display: block;
        width: 290 / @base;
        margin: 30 / @base auto;
        padding: 10 / @base 10 / @base;
        background-color: rgb(165, 42, 42);
        color: #fff;
        font-weight: 700;
        border: 0;
        border-radius: 5 / @base;
        &.disabled {
          background-color: rgba(165, 42, 42, 0.5);
          color: #fff;
        }
      }
    }
    .logininputs_err {
      display: block;
      color: red;
    }
  }
}
</style>
